<div class="alert alert-block alert-success">
    <a class="close" data-dismiss="alert" href="#">×</a>
    <h4 class="alert-heading"><i class="fa fa-check-square-o"></i> Check validation!</h4>
    <p>
        You may also check the form validation by clicking on the form action button. Please try and see the results below!
    </p>
</div>

<section id="widget-grid" class="">
    <div class="row">
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="jarviswidget" id="wid-id-1" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-deletebutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-comments"></i> </span>
                    <h2>检索条件 </h2>
                </header>
                <div>
                    <div class="widget-body no-padding">
                        <div class="smart-form" novalidate="novalidate">
                            <fieldset>
                                <div class="row">
                                    <section class="col col-4">
                                        <label class="input"> <i class="icon-prepend fa fa-user"></i>
                                            <input type="text" name="fname" placeholder="First name">
                                        </label>
                                    </section>
                                    <section class="col col-4">
                                        <label class="input"> <i class="icon-prepend fa fa-user"></i>
                                            <input type="text" name="lname" placeholder="Last name">
                                        </label>
                                    </section>
                                    <section class="col col-4">
                                        <label class="input"> <i class="icon-prepend fa fa-user"></i>
                                            <input type="text" name="lname1" placeholder="Last name">
                                        </label>
                                    </section>
                                </div>
                            </fieldset>

                            <footer>
                                <button type="submit" class="btn btn-primary">
                                    Search
                                </button>
                            </footer>
                        </div>

                    </div>
                </div>
            </div>
        </article>
    </div>


    <div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" data-widget-deletebutton="false" >
        <header>
            <span class="widget-icon"> <i class="fa fa-table"></i> </span>
            <h2>Standard Data Tables </h2>
        </header>
        <div>
            <div class="jarviswidget-editbox">
                <!-- This area used as dropdown edit box -->
            </div>
            <div class="widget-body no-padding">
                <table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                    <tr>
                        <th data-hide="phone">ID</th>
                        <th data-class="expand"><i class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i> Name</th>
                        <th data-hide="phone"><i class="fa fa-fw fa-phone text-muted hidden-md hidden-sm hidden-xs"></i> Phone</th>
                        <th>Company</th>
                        <th data-hide="phone,tablet"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> Zip</th>
                        <th data-hide="phone,tablet">City</th>
                        <th data-hide="phone,tablet"><i class="fa fa-fw fa-calendar txt-color-blue hidden-md hidden-sm hidden-xs"></i> Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Jennifer</td>
                        <td>1-342-463-8341</td>
                        <td>Et Rutrum Non Associates</td>
                        <td>35728</td>
                        <td>Fogo</td>
                        <td>03/04/14</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Clark</td>
                        <td>1-516-859-1120</td>
                        <td>Nam Ac Inc.</td>
                        <td>7162</td>
                        <td>Machelen</td>
                        <td>03/23/13</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

</section>
<script type="text/javascript">

    pageSetUp();
    var pagefunction = function() {

        /* BASIC ;*/
        var responsiveHelper_dt_basic = undefined;
        var responsiveHelper_datatable_fixed_column = undefined;
        var responsiveHelper_datatable_col_reorder = undefined;
        var responsiveHelper_datatable_tabletools = undefined;

        var breakpointDefinition = {
            tablet : 1024,
            phone : 480
        };

        $('#dt_basic').dataTable({
            "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>"+
            "t"+
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
            "autoWidth" : true,
            "preDrawCallback" : function() {
                // Initialize the responsive datatables helper once.
                if (!responsiveHelper_dt_basic) {
                    responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
                }
            },
            "rowCallback" : function(nRow) {
                responsiveHelper_dt_basic.createExpandIcon(nRow);
            },
            "drawCallback" : function(oSettings) {
                responsiveHelper_dt_basic.respond();
            }
        });

    };

    loadScript("js/plugin/datatables/jquery.dataTables.min.js", function(){
        loadScript("js/plugin/datatables/dataTables.colVis.min.js", function(){
            loadScript("js/plugin/datatables/dataTables.tableTools.min.js", function(){
                loadScript("js/plugin/datatables/dataTables.bootstrap.min.js", function(){
                    loadScript("js/plugin/datatable-responsive/datatables.responsive.min.js", pagefunction)
                });
            });
        });
    });
    /*var pagedestroy = function(){
     }
     pagefunction();*/
</script>
